<template>
  <Crumbs
    :crumbName="[
      {
        route: '',
        name: '论坛管理',
      },
    ]"
  />
  <a-card style="min-height: 90%">
    <div class="query border">
      <a-row>
        <a-col :span="6">
          <a-row>
            <a-col :span="9" class="right">
              <span>用户名查询：</span>
            </a-col>
            <a-col :span="15">
              <a-input v-model:value="username" placeholder="用户名" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-row>
            <a-col :span="9" class="right">
              <span>论坛标题查询：</span>
            </a-col>
            <a-col :span="15">
              <a-input v-model:value="forumTitle" placeholder="论坛标题" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" :offset="4">
          <a-row>
            <a-col :span="12">
              <a-button type="primary" @click="handleQueryForum">查询</a-button>
            </a-col>
            <a-col :span="12">
              <a-button @click="handleResetList">重置</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="table border">
      <a-page-header title="数据列表">
        <template #extra>
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled type="primary">添加论坛</a-button>
          </a-popover>
          <a-button v-else class="pass-btn" type="primary">添加论坛</a-button>
        </template>
      </a-page-header>
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="{ current: current }"
        @change="tablePageChange"
        rowKey="id"
      >
        <template #username="{ record }">
          <a-avatar :src="record.avatar" />
          <span style="margin-left: 5px">{{ record.username }}</span>
        </template>
        <template #operation="{ record }">
          <a-button
            size="small"
            type="primary"
            style="margin-right: 10px"
            @click="handleCheckDetails(record.id)"
            >查看</a-button
          >
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled size="small" type="primary">删除</a-button>
          </a-popover>
          <a-popconfirm
            v-else
            title="此操作将永久删除该用户, 是否继续?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delForum(record.id)"
            @cancel="cancelDel"
          >
            <a-button size="small" type="primary" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
// 导入组件
import Crumbs from "@/components/Crumbs";
// 导入列配置
import { useColumns } from "./useColumns";
// 导入表格数据
import { useForumDataList } from "./useForumDataList";
// 导入查询方法
import { useQueryForum } from "./useQueryForum";
// 导入删除论坛方法
import { useDelForum } from "./useDelForum";
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "",
  components: {
    Crumbs,
  },
  setup() {
    // 列配置
    const { columns } = useColumns();

    // 表格数据
    const { data, getForumData } = useForumDataList();

    // 当前页
    const current = ref(1);

    // 查询论坛
    const {
      username,
      forumTitle,
      queryData,
      handleQueryForum,
      handleResetList,
    } = useQueryForum(data, current, getForumData);

    // 点击切换页面
    const tablePageChange = (pagination) => {
      current.value = pagination.current;
      // 重新渲染
      if (queryData.value.length !== 0) {
        data.value = queryData.value;
      } else {
        getForumData();
      }
    };

    // 删除论坛
    const { cancelDel, delForum } = useDelForum(getForumData);

    // 使用路由
    const router = useRouter();

    // 查看详情
    const handleCheckDetails = (id) => {
      router.push("/forum/details/" + id);
    };

    return {
      columns, // 列配置
      data, // 表格数据
      current, // 当前页码
      tablePageChange, // 点击切换页面
      username, // 用户名输入框
      forumTitle, // 标题输入框
      queryData, // 存储查询后的列表
      handleQueryForum, // 查询论坛列表方法
      handleResetList, // 重置论坛列表方法
      cancelDel, // 取消删除
      delForum, // 删除论坛方法
      handleCheckDetails, // 查看详情
    };
  },
};
</script>
<style scoped lang="less">
.query {
  height: 100px;
  margin-bottom: 15px;
  > .ant-row {
    margin-top: 30px;
    line-height: 40px;
  }
  span {
    font-size: 12px;
  }
  .ant-select {
    width: 100%;
  }
  .right {
    text-align: right;
    span {
      font-size: 13px;
    }
  }
}
.table {
  .ant-table-wrapper {
    padding: 16px;
  }
}
.border {
  border: 1px solid #ddd;
}
.ant-page-header {
  border-bottom: none !important;
}
</style>
